<template>
  <div class="header-box">
    <div class="header-top-register">
      <div class="register-center">
        <ul class="left-register" v-if="!username">
          <li>
            <router-link to="/login">请登录</router-link>
          </li>
          <li>
            <router-link to="/register">免费注册</router-link>
          </li>
        </ul>
        <ul class="left-register" v-else>
          <li>
            <router-link to="/shopList">{{loginData.uname}}</router-link>
          </li>
          <li>
            <a href="javascript:void(0)" @click="goOut">退出登录</a>
          </li>
        </ul>
        <ul class="right-register">
          <li>
            <router-link to="/shopList">购物车</router-link>
          </li>
          <li @mouseenter="scanShow = true;" @mouseleave="scanShow = false;">
            <a href="javascript:void(0);">关注我们</a>
          </li>
          <div class="showScan" v-show="scanShow">
            <img src="@/assets/scan.png" alt srcset>
            <div>扫一扫关注</div>
          </div>
          <li>
            <a href="javascript:void(0);" @click="collection">收藏本站</a>
          </li>
          <li>
            <a href="javascript:void(0);">电话联系:5000048769</a>
          </li>
        </ul>
      </div>
    </div>
    <header>
      <router-link to="/index">
        <img style="margin-top:10px;" src="@/assets/logo2.png" alt>
      </router-link>
      <div class="search">
        <input
          type="text"
          name
          id
          v-model="searchVal"
          @keyup.enter="search"
          placeholder="现货大促 指定款买一送一>>>"
        >
      </div>
      <div class="scan">
        <img src="@/assets/scan.png" width="75px" alt>
        <div class="scan_label">
          <span>扫一扫</span>
          <hr>
          <span>赢大奖</span>
        </div>
      </div>
    </header>
  </div>
</template>

<script>
import { ljmAjax } from "@/api/index";
export default {
  data() {
    return {
      searchVal: "",
      scanShow: false
    };
  },
  created() {
    console.log(this.loginData);
  },
  computed: {
    username() {
      return this.$store.state.isLogin;
    },
    loginData() {
      return this.$store.state.loginData || "";
    }
  },
  methods: {
    goOut() {
      this.$store.commit("SETLOGIN", false);
      this.$store.commit("LJM_LOGIN", {
        id: "",
        password: "",
        uname: "",
        uphone: "",
        username: ""
      });
      sessionStorage.removeItem("ljm_login_session");
      this.$router.push('/login')
    },
    search() {
      this.$router.push("/search?key=" + this.searchVal);
    },
    collection() {
       this.$message({
          message: '请使用Ctrl + D 收藏本站',
          type: 'warning'
        });
    }
  }
};
</script>
<style lang="scss" scoped>
.header-box {
  background: #fff;
  color: #717171;
  border-bottom: 1px solid #efefef;
  /* height: 178px; */
  .header-top-register {
    // overflow: hidden;
    background-color: #f8f8f7;
    height: 30px;
    width: 100%;
    line-height: 30px;
    position: relative;
    z-index: 290;
    color: #717171;
    .register-center {
      width: 1200px;
      margin: 0 auto;
      li {
        font: 400 12px/30px "microsoft yahei";
        padding-right: 20px;
        a {
          color: #717171;
        }
        a:hover {
          color: red;
        }
      }
    }
    .left-register {
      float: left;
    }
    .right-register {
      float: right;
      .showScan {
        position: absolute;
        top: 30px;
        right: 340px;
        width: 140px;
        height: 160px;
        padding: 10px;
        border: 1px solid #ccc;
        border-top: none;
        background: #fff;
        text-align: center;
        img {
          width: 120px;
          height: 120px;
        }
      }
      li {
        padding-right: 0px;
        padding-left: 20px;
      }
    }
  }
}
header {
  position: relative;
  width: 1200px;
  height: 100px;
  margin: 0 auto;
}
header .scan {
  position: absolute;
  right: 0px;
  top: 3px;
  padding: 10px;
  display: flex;
  border: 2px solid #ffa602;
  border-radius: 10px;
}
.scan img {
  width: 70px;
  height: 70px;
}
.scan .scan_label {
  padding-left: 5px;
}
.scan .scan_label span {
  display: block;
}
.search {
  display: inline-block;
  border-radius: 5px;
  overflow: hidden;
  position: absolute;
  top: 30px;
  left: 300px;
}
.search input {
  font-family: "微软雅黑";
  width: 542px;
  border: 0 none;
  background: #f0f0f0;
  color: #333;
  font-size: 14px;
  line-height: 20px;
  height: 20px;
  padding: 9px 16px;
  outline: none;
}
</style>


